<template>
  <div class="app-container">
    <div class="contentBox">
        <div id="container"  style="width: 600px;height: 400px;" ></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Index',
  components: {
 
  },
  data() {
    return {
    }
  },
  mounted(){
    this.drawLine()
  },
  methods: {
    drawLine(){
          // 基于准备好的dom，初始化echarts实例
          var doc = document.getElementById('container')
          let myChart = this.echarts.init(doc,'dark')
          //配置图表
          var option = {
            title: {
              text: '',
            },
            color:["#54C1F0"],
            tooltip: {},
            xAxis: {
              data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: [5,20,36,10,10,20]
            }]
          };
          myChart.setOption(option);
      }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
    box-sizing: border-box;
    padding: 20px;
    .contentBox{
        background: #fff;
    }
}
.container{
  width: '300px';
  height: '300px';
  display: block;
}
</style>
